<template>
  <footer>
    <div class="container">
      <div class="row mt-5">
        <div class="col-9">
          <dl>
            <dt>订单服务</dt>
            <dd><a href="">购买指南</a></dd>
            <dd><a href="">支付方式</a></dd>
            <dd><a href="">送货策略</a></dd>
          </dl>
          <dl>
            <dt>服务支持</dt>
            <dd><a href="">售后服务</a></dd>
            <dd><a href="">维修门店</a></dd>
            <dd><a href="">零售门店</a></dd>
          </dl>
          <dl>
            <dt>服务支持</dt>
            <dd><a href="">售后服务</a></dd>
            <dd><a href="">维修门店</a></dd>
            <dd><a href="">零售门店</a></dd>
          </dl>
          <dl>
            <dt>服务支持</dt>
            <dd><a href="">售后服务</a></dd>
            <dd><a href="">维修门店</a></dd>
            <dd><a href="">零售门店</a></dd>
          </dl>
          <dl>
            <dt>服务支持</dt>
            <dd><a href="">售后服务</a></dd>
            <dd><a href="">维修门店</a></dd>
            <dd><a href="">零售门店</a></dd>
          </dl>
          <dl>
            <dt>服务支持</dt>
            <dd><a href="">售后服务</a></dd>
            <dd><a href="">维修门店</a></dd>
            <dd><a href="">零售门店</a></dd>
          </dl>
        </div>
        <div class="col-3">
          <ul class="list-unstyled footer-right text-right">
            <li class="w-100"><h4 class="text-dark">400-626-5666</h4></li>
            <li class="w-100"><p class="small text-secondary">周一至周日 9:00-18:00（仅收市话费）</p></li>
            <li class="w-100"><a href="#" class="btn border"><i class="fa fa-question-circle"></i> 在线帮助</a></li>
          </ul>
        </div>
      </div>
      <hr>
      <div class="row mt-4 pb-5 copy-right">
        <div class="col-10">
          <div class="nav-separte">
            <ul class="nav text-copyright">
              <li>Copyright © , Smartisan Digital Co., Ltd. All Rights Reserved.北京锤子数码科技有限公司</li>
              <li><a href="#">法律声明</a></li>
              <li><a href="#">隐私条款</a></li>
              <li><a href="#">开发者中心</a></li>
            </ul>
            <a href="" class="text-copyright-bottom nav-link p-0">
              <span>京ICP备14041720号-1</span>
              <span>京ICP证140622号</span>
              <span>京公网安备11010502025474</span>
            </a>
          </div>
        </div>
        <div class="col">
          <div class="text-right">
            <div class="dropup">
              <button type="button" class="btn border dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-globe"></i> 中文
              </button>
              <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item"><i class="fa fa-globe"></i> 英文</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'Footer',
  data () {
      return {

      }
  }
}
</script>

<style scoped>
footer {
  background: #fafafa;
  border-top: solid 1px #e6e6e6;
}

footer .container dl {
  display: inline-block;
  width: 140px;
  color: #ccc;
}

footer .container dt,
footer .container dd {
  font-size: 12px;
}

footer .container dt {
  color: #646464;
  padding: 0 0 14px;
}

footer .container dd a,
footer .nav-separte .footer-right,
footer .copy-right .text-copyright-bottom {
  color: #c3c3c3;
  transition: all 0.3s;
}

footer .container dd a:hover {
  color: #5079d9;
}

footer .copy-right {
  font-size: 12px;
}

footer .copy-right .text-copyright {
  color: #646464;
}
</style>

